import React, { Component, createRef,useRef} from 'react'

const FnRef = () =>{
    const myRef = useRef()
    return (
        <div>
            FnRef
            <div ref={myRef}>fn_div</div>
            <button onClick={()=>console.log(myRef.current)}>函数点我</button>
        </div>
    )
}

export class ClassRef extends Component {
    constructor(){
        super()
        this.my_div = createRef()
    }
    btn = () =>{
        // console.log(this.refs.my_p);
        // console.log(this.my_span);
        console.log(this.my_div);
    }
    // my_ref = (el) =>{
    //     this.my_span = el
    // }
    render() {
        return (
            <div>
                <FnRef/>
                <p ref="my_p">hi,my is p</p>
                <span ref={
                    // this.my_ref
                    (el)=>this.my_span=el
                }>hi,my is span</span>

                <div ref={this.my_div}>hi,my is div</div>

                <button onClick={this.btn}>点击</button>
            </div>
        )
    }
}

export default ClassRef
